<template>

    <el-card class="card-with-gradient">
        <el-button size="large" type="success" style="margin-bottom: 20px;" @click="addDialogShow = true">添加</el-button>
        <el-table :data="departmentList" style="width: 100%">
            <el-table-column prop="zid" label="ID"/>
            <el-table-column prop="faculty" label="学院名称" />
            <el-table-column prop="professional" label="专业名称" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="default" type="primary" @click="selectByZid(scope.row.zid)">修改</el-button>
                    <el-popconfirm title="你确认要删除嘛" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                        @confirm="deleteByDid(scope.row.zid)">
                        <template #reference>
                            <el-button size="default" type="danger" @click="console.log(scope.row.zid)">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>


    <!-- 添加部门的对话框开始 -->
    <el-dialog v-model="addDialogShow" title="添加学院信息" width="500">
        <el-form>
            <el-form-item label="学院名称" label-width="20%">
                <el-input v-model="departmentAdd.faculty" autocomplete="off" />
            </el-form-item>
            <el-form-item label="专业名称" label-width="20%">
                <el-input v-model="departmentAdd.professional" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert()">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加部门的对话框结束 -->

    <!-- 修改部门的对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改学院信息" width="500">
        <el-form>
            <el-form-item label="学院名称" label-width="20%">
                <el-input v-model="departmentUpdate.faculty" autocomplete="off" />
            </el-form-item>
            <el-form-item label="专业名称" label-width="20%">
                <el-input v-model="departmentUpdate.professional" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update()">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改部门的对话框结束 -->
</template>

<script setup>
import departmentApi from '@/api/departmentApi';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';


//保存部门信息的数组,用于遍历
const departmentList = ref([]);

//添加对话框是否显示的状态
const addDialogShow = ref(false);

//修改对话框是否显示的状态
const updateDialogShow = ref(false);

//被添加部门的信息
const departmentAdd = ref({
    faculty: "",
    professional: "",
});

 //被修改部门的信息
const departmentUpdate = ref({
    zid: "",
    faculty: "",
    professional: "",
});

//定义方法完成部门的添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    departmentApi.insert(departmentAdd.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                //隐藏
                addDialogShow.value = false
                //清空
                departmentAdd.value = {
                    faculty: "",
                    professional: "",
                }
                //刷新表格
                selectAll()
            } else {
                loading.close()
                ElMessage.error(resp.msg)
            }
        })
}
//定义方法根据id删除部门
function deleteByDid(zid) {
    departmentApi.delete(zid)
        .then(resp => {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                loading.close()
                //弹出消息
                ElMessage.success(resp.msg)
                selectAll()
            } else {
                //弹出消息
                loading.close()
                ElMessage.error(resp.msg)
            }
        });
}
//定义方法实现部门的修改
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    departmentApi.update(departmentUpdate.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                //隐藏
                updateDialogShow.value = false
                //清空
                departmentUpdate.value = {
                    zid: "",
                    faculty: "",
                    professional: "",
                }
                //刷新表格
                selectAll()
            } else {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
}
//定义方法根据id查询部门
function selectByZid(zid) {
    departmentApi.selectByZid(zid)
        .then(resp => {
            console.log(resp.data);
            departmentUpdate.value = resp.data;
            //显示修改模态框
            updateDialogShow.value = true
        })
}

//定义方法获取所有部门信息
function selectAll() {
    departmentApi.selectAll()//发送axios请求给服务器
        .then(resp => {//成功之后的回调
            console.log(resp);//打印获取的resp.data数据
            departmentList.value = resp.data;
        })
}
selectAll()//调用方法获取部门信息
</script>

<style scoped>
.card-with-gradient {

    background: linear-gradient(to right, rgb(76, 228, 225), rgb(99, 207, 60));
    /* 添加一些基本的样式来美化卡片 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 阴影 */
    color: white;
}
</style>